/**
 * Created by xiteng on 2017/5/17.
 */
// 商品评价
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    PixelRatio,
    Modal,
    Dimensions
} from 'react-native';

import ImageViewer from 'react-native-image-zoom-viewer'
import CommonUtil from '../util/CommonUtil'
const {height, width} = Dimensions.get('window');

export default class JudgeItemCell extends Component {
    constructor(props) {
        super(props)
        this.state = {
            showBigImage: false,
            index: 0
        }
        this.common=this.props.common;
    }


    render() {
        let imageUrlList=[];
        for(let j=0;j<this.common.imageUrlList.length;j++){
            imageUrlList.push({url:this.common.imageUrlList[j]});
        }
        return <View style={{backgroundColor: '#fff'}}>
            <View style={[{flexDirection: 'row', justifyContent: 'space-between', padding: 10}, styles.borderBottom]}>
                <View style={{flexDirection: 'row', alignItems: 'center',flex:1}}>
                    <Image source={{uri: this.common.userIconUrl}} style={{width: 30, height: 30, borderRadius: 15}}/>
                    <View style={{marginLeft:5,flex:1}}>
                        <Text style={{fontSize: 12}}>{this.common.userName}</Text>
                        <View style={{flexDirection: 'row'}}>
                        {
                            CommonUtil.getStoreStars(this.common.score)
                        }
                        </View>
                    </View>
                </View>
                <View style={{alignItems: 'center', justifyContent: 'center'}}>
                    <Text style={{color: 'gray'}}>{this.common.commentTime}</Text>
                </View>
            </View>
            <View style={{padding: 0,marginLeft:10}}>
                <Text numberOfLines={0} style={{color: 'gray'}}>
                    {this.common.comment}
                </Text>
            </View>
            <View style={[{flexWrap: 'wrap', flexDirection: 'row', marginHorizontal: 10,paddingBottom:10,marginTop:10}, styles.borderBottom]}>
                {
                    this.common.imageUrlList.map((img, index) => {
                        return <TouchableOpacity key={index} onPress={() => {
                            this.setState({
                                showBigImage: true,
                                index: index
                            })
                        }}>
                            <Image source={{uri: img}} style={{width: width/5, height: width/5, marginRight: 5,marginTop:5}}
                                   key={index}/>
                        </TouchableOpacity>
                    })
                }
            </View>
            <Modal
                onRequestClose={() => {this._setModalVisible(false)}}
                visible={this.state.showBigImage}
                transparent={true}>
                <ImageViewer
                    index={this.state.index}
                    imageUrls={imageUrlList}
                    onClick={() => {
                        this.setState({
                            showBigImage: false
                        })
                    }}/>
            </Modal>
        </View>
    }
    _setModalVisible(visible) {
        this.setState({showBigImage: visible});
    }
}

const styles = {
    borderBottom: {
        borderBottomColor: '#f5f5f5',
        borderBottomWidth: 1 / PixelRatio.get()
    },
}
